<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="80%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-container>
            <el-tabs tab-position="top" style="width:100%">
                <el-tab-pane label="计件工资" @tab-change="tabChange">
                    <el-main>
                        <scTable ref="table" :data="baseData" @selection-change="selectionChange" stripe border height="200" hidePagination hideDo>
                            <el-table-column label="底薪" prop="basic_salary" align="center"></el-table-column>
                            <el-table-column label="房补" prop="housing_allowance_money" align="center"></el-table-column>
                            <el-table-column label="餐补" prop="meal_allowance_money" align="center"></el-table-column>
                            <el-table-column label="补扣" prop="deduction_amount" align="center"></el-table-column>
                            <el-table-column label="其他" prop="other_amount" align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template #default="scope">
                                    <el-button-group style="display:flex;flex-direction:column">
                                        <el-button text type="primary" size="small" @click="other(scope.row)">查看补扣明细</el-button>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </scTable>
                        <scTable ref="table" :data="pieceData" @selection-change="selectionChange" stripe border height="300" hidePagination hideDo show-summary>
                            <el-table-column label="日期" prop="date" align="center"></el-table-column>
                            <el-table-column label="计件工资" prop="total_amount" align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template #default="scope">
                                    <el-button-group style="display:flex;flex-direction:column">
                                        <el-button text type="primary" size="small" @click="detail(scope.row)">查看明细</el-button>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </scTable>
                    </el-main>
                </el-tab-pane>
                <el-tab-pane label="计时工资">
                    <el-main>
                        <scTable ref="table" :data="baseData" @selection-change="selectionChange" stripe border height="200" hidePagination hideDo>
                            <el-table-column label="底薪" prop="basic_salary" align="center"></el-table-column>
                            <el-table-column label="房补" prop="housing_allowance_money" align="center"></el-table-column>
                            <el-table-column label="餐补" prop="meal_allowance_money" align="center"></el-table-column>
                            <el-table-column label="补扣" prop="deduction_amount" align="center"></el-table-column>
                            <el-table-column label="其他" prop="other_amount" align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template #default="scope">
                                    <el-button-group style="display:flex;flex-direction:column">
                                        <el-button text type="primary" size="small" @click="other(scope.row)">查看补扣明细</el-button>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </scTable>
                        <scTable ref="table" :data="timeData" @selection-change="selectionChange" stripe border height="300" hidePagination hideDo show-summary>
                            <el-table-column label="日期" prop="date" align="center"></el-table-column>
                            <el-table-column label="计时工资" prop="money" align="center"></el-table-column>
                            <el-table-column label="正班时长" prop="regular_work_time" align="center"></el-table-column>
                            <el-table-column label="加班时长" prop="overtime_work_time" align="center"></el-table-column>
                            <el-table-column label="备注" prop="timing_remark" align="center"></el-table-column>
                        </scTable>
                    </el-main>
                </el-tab-pane>
            </el-tabs>
        </el-container>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
        </template>
	</el-dialog>
    <deduction v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></deduction>
    <piece v-if="dialog.piece" ref="pieceDialog" @success="handleSuccess" @closed="dialog.piece = false" draggable></piece>
</template>

<script>
import deduction from './deduction.vue';
import Piece from './piece.vue';
export default {
    components: { deduction, Piece },
	emits: ['success', 'closed'],
    props:{
        query: { type: String, default: "" },
    },
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增员工',
				edit: '工资录入',
				show: '工资明细'
			},
            dialog:{
                save:false,
                piece:false,
            },
			visible: false,
			isSaveing: false,
            list:[],
            search:{
                staff_id:null,
            },
            pieceData:[],
            baseData:[],
            timeData:[],
            staff_id:"",
            month:"",
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        // 查看补扣明细
        other(row){
            let obj = {
                staff_id:row.staff_id,
                month:row.month,
                source:2
            }
            this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(obj)
			})
        },
        detail(row){
            let obj = {
                staff_id:this.staff_id,
                date:row.date,
            }
            this.dialog.piece = true
			this.$nextTick(() => {
				this.$refs.pieceDialog.open('edit').setData(obj)
			})
        },
        // 工资发放
        async table_grant(row) {
			var reqData = { ids: row.id };
			var res = await this.$API.inventory.staffSalary.grant.post(reqData);
			if (res.code == 1) {
				this.$message.success("发放成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
        async setData(data) {
            this.staff_id = data.id,
            this.month = data.month
            let a = {
                basic_salary:data.salary.basic_salary,
                housing_allowance_money:data.salary.housing_allowance_money,
                meal_allowance_money:data.salary.meal_allowance_money,
                deduction_amount:data.salary.deduction_amount,
                other_amount:data.salary.other_amount,
                staff_id:data.id,
                month:data.month,
            }
            this.baseData.push(a)
            var reqData = { staff_id: data.id, month:data.month};
            var res = await this.$API.inventory.staffSalary.piece.get(reqData);
            this.pieceData = res.data.rows
            var request = await this.$API.inventory.staffSalary.time.get(reqData);
            this.timeData = request.data.rows
        },
	}
}
</script>

<style>
.el-input-group__append{
    padding: 0 6px;
}
</style>
